<template>
	<view>
		<view>
			<homeBanner :banners="banners"></homeBanner>
		</view>
		<view class="icohe">
			<view class="icohe-1 magin-aoto">
				<image class="imageppo" src="/static/img/Home/duigou.png"></image>
				<view class="textp">{{ data.title }}</view>
			</view>
			<view class="icohe-2 magin-aoto">
				<view class="icohe-2-view">
					{{ data.description }}
				</view>
				<view class="icohe-2-view2">
					<!-- 已更新{{ data.list.length }}集/共{{ data.info.sum }}集 -->
					共{{ data.count }}集
				</view>
			</view>
		</view>
		<view class="goods-list">
			<view class="list-tob" style="background-color: #fff;">
				<view @click="appo(1)">
					<text :class="{ 'font-seci' : ppo == 1 }">课程介绍</text>
					<view v-show="ppo==1" class="xian"></view>
				</view>
				<view @click="appo(2)">
					<view :class="{ 'font-seci' : ppo == 2 }">听课列表</view>
					<view v-show="ppo==2" class="xian"></view>
				</view>
			</view>
			<view v-if="ppo===1" class="list-dibu1">
				<rich-text class="dibutup" :nodes="data.introduction" @itemclick="perview"></rich-text>
				<!-- <view class="dibutup" v-html="data.info.info"></view> -->
			</view>
			<view v-if="ppo===2" class="list-dibu2">
				<view class="dibu-list" v-for="(item, indexo) in data.shop_course_item" :key="item.id"
					@click.stop="ship(item, indexo)">
					<view class="list-1">
						<view class="list-bt" v-if="item.type == 1">
							<text class="text-1" :class="{'text-5' : indexo == indexop }">视频 </text>
							<view class="text-2 yichu-yc" :class="{'chengsezit' : indexo == indexop }">
								{{ item.title }}
							</view>
							<view class="list-sj" v-if="item.type == 1">
								<u-icon name="clock"></u-icon><text>{{ item.time }}</text>
							</view>
							<view class="list-2">
								<image v-if="indexo !== indexop" src="/static/img/Home/zanting1.png"></image>
								<image v-else src="/static/img/Home/zanting.png"></image>
								<!-- <image src="/static/img/Home/sou2.png"></image> -->
							</view>
						</view>
						<view class="list-bt1" v-if="item.type == 3">
							<text class="text-1" :class="{'text-5' : indexo == indexop }">文章</text>
							<view class="text-2 yichu-yc" :class="{'chengsezit' : indexo == indexop }">
								{{ item.title }}
							</view>
							<view class="list-2">
								<image v-if="indexo !== indexop" src="/static/img/Home/sousou1.png"></image>
								<image v-else src="/static/img/Home/sousuo.png"></image>
								<!-- <image src="/static/img/Home/sou2.png"></image> -->
							</view>
						</view>
					</view>
					<view style="height: 250rpx;"></view>
				</view>
			</view>
		</view>
		<view style="height: 250rpx;"></view>
		
		<!-- <view v-if="data.price > 0 ">
			<view v-if="data.is_buy">
				<view class="dibut" @click="listen">
					<view>您已购买 开始听课</view>
				</view>
			</view>
			<view v-else-if="data.role_can">
				<view class="dibut" @click="listen">
					<view>您的身份可免费听课</view>
				</view>
			</view>
			<view v-else-if="data.shi_ting">
				<view class="dibut" @click="listen">
					<view>试听课程</view>
				</view>
			</view>
			<view v-else-if="data.buy_num > 0">
				<view class="dibut" @click="listen">
					<view>试听课程</view>
				</view>
			</view>
			<view v-else>
				<view class="dibut" @click="buyBtn">
					<view>购买课程(￥{{ data.price }})</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="dibut" @click="listen">
				<view>免费听课</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import homeBanner from '@/pagesSchool/components/home/banner';
	import config from '@/utils/request.js'
	import { apiGetVideoDetails } from "@/api/school.js"
	export default {
		components: {
			homeBanner
		},
		data() {
			return {
				ppo: 1,
				indexop: 'a',
				isFixedTop: false,
				indexopp: null,
				indexoopp: 0,
				iocd: 0,
				data: {},
				banners: [],
				isLoading: false,
				content: '',
				arrImgList: [],
				audio: [],
				ids:null
			}
		},
		onLoad(option) {
			this.ids = option.id
			if (option.id) {
				this.getCourseInfo(option.id)
				
			} else {
				this.app.showToast('课程参数有误', '/pages/school/school');
			}
			let authcode = uni.getStorageSync("authcode");
			// if(authcode != '') {
			// 	this.isLogin = 1;
			// }
		},
		methods: {
			// 点击图片预览
			perview(e) {
				return
				this.content = this.data.info.info.match(/<img[^>]+>/g);

				var arrImg = []
				for (var j = 0; j < this.content.length; j++) {
					this.content[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
						arrImg.push(capture)
					})
				}
				this.arrImgList = arrImg
				uni.previewImage({
					current: arrImg.length,
					urls: arrImg,
				})
			},
			appo(i) {
				console.log(i);
				this.ppo = i
			},
			ship(item, indexo) {
				let url = '';
				this.indexop = indexo
				if (item.type == 1) {
					url = '/pagesSchool/pages/frequency?id=' + this.ids
				} else if (item.type == 3) {
					url = '/pagesSchool/pages/essay?id=' + this.ids
				}
				uni.setStorageSync('SchoolList',item)
				uni.navigateTo({
					url: url
					
				})
				
			},
			getCourseInfo(id) {
				apiGetVideoDetails({
					id
				}).then(res=>{
					console.log(res,'------------');
					this.data = res;
					this.banners = res.imgs
				})
				// this.$u.get('/shop.shopCourse/detail', {
				// 	id: id
				// }).then(res => {
				// 	this.data = res.data;
				// 	let imgs = res.data.info.imgs.split(',');
				// 	imgs.forEach((item, index) => {
				// 		this.banners.push({
				// 			background: '',
				// 			link: '',
				// 			src: item
				// 		})
				// 	})

				// });
			},
			buyBtn() {
				return
				if (this.isLoading == true) {
					return false;
				}

				let data = {};
				data.goods_id = this.data.info.goods_id
				data.sku_id = 0;
				data.number = 1;
				data.type = 'onbuy'
				data.prom_type = 0;
				data.prom_id = 0;
				data.buy_notice = 1;
				this.isLoading = true;

				this.$u.post('shop/api.flow/addCart', data).then(res => {
					this.isLoading = false;

					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
						return false;
					} else {
                        // @todo 这个是什么页面，结算页。
                        this.gotoPage('/pages/shop/flow/checkOut?recids=' + res.data.rec_)
					}
				}).catch(res => {
					this.isLoading = false;
				})
			},
			listen() {
				let item = this.data.list[0];
				let url = '';
				if (item.lx == 1) {
					url = '/pagesSchool/pages/frequency?id=' + item.id + '&goods_id=' + this.data.info.goods_id;
				} else if (item.lx == 3) {
					url = '/pagesSchool/pages/essay?id=' + item.id + '&goods_id=' + this.data.info.goods_id;
				}
				uni.navigateTo({
					url: url
				})
			},
            gotoPage(url) {
                uni.navigateTo({
                    url: url
                })
            }
		}
	}
</script>

<style lang="scss">
	.yichu-yc {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.magin-aoto {
		margin: 0 auto;
	}

	.font-seci {
		font-size: 32rpx !important;
	}

	.chengsezit {
		color: #F76E00 !important;

	}

	.text-5 {
		background-color: #FF8200 !important;
		color: #ffffff !important;
	}

	.xian {
		width: 36rpx;
		height: 6rpx;
		background: #F76E00;
		border-radius: 3rpx;
		margin-top: -30rpx;
		margin-left: 40rpx;
	}

	.imal {
		width: 750rpx;
		height: 419rpx;
	}

	.icohe {
		width: 750rpx;
		// height: 280rpx;
		background: #FFFFFF;
		padding: 31rpx 0 33rpx 0;

		.icohe-1 {
			width: 640rpx;
			// height: 55rpx;
			font-weight: 400;
			font-size: 31rpx;
			color: #000000;
			display: flex;

			.textp {
				width: 630rpx;
				// height: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.imageppo {
				width: 23rpx;
				height: 24rpx;
				margin-right: 11rpx;
				margin-top: 10rpx;
			}

			.icohe-image1 {
				width: 23rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}

		.icohe-2 {
			width: 630rpx;
			// height: 60rpx;
			font-weight: 400;

			color: #666666;
			padding-left: 24rpx;

			.icohe-2-view {
				font-size: 25rpx;
				margin-bottom: 22rpx;
			}

			.icohe-2-view2 {
				margin-top: 21rpx;
				font-size: 22rpx;
				color: #999999 !important;
				text-align: right;
			}
		}

	}

	.goods-list {
		width: 687rpx;
		// height: 2700rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 22rpx;
		padding-bottom: 30rpx;

		.list-tob {
			width: 615rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 100;
			line-height: 100rpx;
			border-bottom: 1rpx solid #d5d1d1;
			font-size: 32rpx;
			font-weight: 400;
			margin-bottom: 30rpx;

		}

		.list-dibu1 {
			width: 687rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;

			.dibutup {
				width: 590rpx;
				// height: 900rpx;

			}

			img {
				max-width: 100% !important;
			}
		}

		.list-dibu2 {

			.dibu-list {
				display: flex;
				justify-content: center;
				// align-items: center;
				margin: 0 auto;
				width: 614rpx;
				height: 61rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;

				.list-1 {
					width: 611rpx;
					height: 61rpx;
					margin-bottom: 20rpx;
					background-color: #F5F5F5;
					position: relative;

					.list-bt {
						width: 611rpx;
						display: flex;

						.text-1 {
							margin-top: 16rpx;
							width: 49rpx !important;
							height: 30rpx !important;
							line-height: 30rpx;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 19rpx;
							color: #fff;
							text-align: center;
							margin-left: 17rpx;
							margin-right: 15rpx;
							background-color: #838383;
						}

						.text-2 {
							// display: inline-flex;
							width: 335rpx;
							font-weight: 400;
							font-size: 30rpx;
							line-height: 61rpx;
							color: #838383;
						}
					}

					.list-bt1 {
						width: 611rpx;
						display: flex;

						.text-1 {
							margin-top: 16rpx;
							width: 49rpx !important;
							height: 30rpx !important;
							line-height: 30rpx;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 19rpx;
							color: #fff;
							text-align: center;
							margin-left: 17rpx;
							margin-right: 15rpx;
							background-color: #838383;
						}

						.text-2 {
							// display: inline-flex;
							width: 460rpx;
							font-weight: 400;
							font-size: 30rpx;
							line-height: 61rpx;
							color: #838383;
						}
					}

					.list-sj {
						display: inline-block;
						margin-top: 18rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
						margin-left: 14rpx;

						text {
							margin-left: 11rpx;
						}
					}
				}

				.list-2 {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translate(-50%, -50%);
					image {
						width: 29rpx;
						height: 29rpx;
					}
				}
			}
		}
	}

	.dibut {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		view {
			width: 691rpx;
			height: 75rpx;
			background: #F76E00;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 75rpx;
			text-align: center;
		}
	}
</style>